<template>
  <div class="app-container" @click="handleMessage">
    <svg-icon icon-class="message"></svg-icon>
    <!-- <span>消息列表</span> -->
    <!-- <i class="inf-num" v-show="numFlag" v-text="numberOfUnreadMessage">0</i> -->
    <el-dialog
      v-dialog-drag
      v-show="false"
      :visible.sync="show"
      title="查看消息列表"
      @close="closeUserView"
      width="80%"
      append-to-body
    >
      <el-scrollbar style="height: 500px">
        <index-message
          :barFlag="1"
          @father-click="getMessageNum"
        ></index-message>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import { getCountOfUnReadMessage } from "@/api/sys/message";
import IndexMessage from "@/views/sys/message/index";
export default {
  name: "ZfsoftMessage",
  components: {
    IndexMessage,
  },
  data() {
    return {
      numberOfUnreadMessage: 0,
      numFlag: false,
      show: false,
    };
  },
  created() {
    this.getMessageNum();
    /*setInterval(() => {
        this.getMessageNum();
      }, 120000);*/
  },
  methods: {
    getMessageNum() {
      getCountOfUnReadMessage()
        .then((response) => {
          if (response.data > 0) {
            this.numFlag = true;
            this.numberOfUnreadMessage = response.data;
          } else {
            this.numFlag = false;
          }
        })
        .catch(function () {
          this.numberOfUnreadMessage = 0;
        });
    },
    handleMessage() {
      this.show = true;
    },
    closeUserView() {
      this.getMessageNum();
      this.show = false;
    },
  },
};
</script>
<style>
.inf-num {
  display: block;
  position: absolute;
  left: 32px;
  top: 3px;
  width: 15px;
  height: 15px;
  background-color: #ff0000;
  border-radius: 100%;
  color: #fff;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  font-style: normal;
}
</style>
